<template>
  <el-dialog
    v-if="modelValue"
    class="red-packet-dialog"
    :model-value="modelValue"
    title="禁言名单"
    style="
      width: 1220px;
      height: auto !important;
      background-color: transparent;
      --el-dialog-box-shadow: none;
    "
    draggable
    :modal="false"
    :append-to-body="true"
    :show-close="false"
    :destroy-on-close="true"
    @update:model-value="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="custom_header"></div>
    </template>
    <div class="red-packet-container" @update:model-value="handleClose">
      <el-carousel
        :interval="0"
        arrow="always"
        type="card"
        height="440px"
        @change="handleCarouselChange"
      >
        <el-carousel-item v-for="(packet, index) in packets" :key="index">
          <div class="red-packet" :class="{ 'is-open': packet.isOpen }">
            <!-- 封面 -->
            <transition name="cover">
              <div v-show="!packet.isOpen" class="cover">
                <div class="qiang-group">
                  <div class="packet_logo">
                    <img src="@/assets/live/Ellipse.png" alt="" />
                  </div>
                  <div class="packet_from">来自 万幸~` 的红包</div>
                  <div class="packet_label">大吉大利，恭喜发财</div>
                </div>
                <img
                  :class="{ flipped: packet.isCircle }"
                  class="flip_img"
                  style="width: 100px; height: 100px; position: absolute; top: 80px; left: 100px"
                  src="@/assets/live/redPacket02.png"
                  alt=""
                  @click="handleOpen(packet)"
                />
                <!-- <div class="decor-line"></div> -->
              </div>
            </transition>

            <!-- 内容 -->
            <transition name="content">
              <div v-show="packet.isOpen" class="content">
                <div class="result">
                  <span class="result_span">恭喜你抢到</span>
                  <div>
                    <span>100</span>
                    <img src="@/assets/dashboard/crystal.png" alt="" />
                  </div>
                </div>
                <div class="qiang-group">
                  <div class="packet_logo">
                    <img src="@/assets/live/Ellipse.png" alt="" />
                  </div>
                  <div class="packet_from">来自 万幸~` 的红包</div>
                  <div class="packet_label">大吉大利，恭喜发财</div>
                </div>
              </div>
            </transition>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, defineProps, defineEmits } from "vue";
defineProps({
  modelValue: {
    // 接收父组件v-model传值
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["update:modelValue"]);
const packets = ref([
  {
    from: "万幸~",
    greeting: "大吉大利，恭喜发财",
    isOpen: false,
    isCircle: false,
  },
  // 可以添加更多红包
  {
    from: "朋友A",
    greeting: "新年快乐，万事如意",
    isOpen: false,
    isCircle: false,
  },
]);

const handleOpen = (packet) => {
  if (!packet.isOpen) {
    packet.isCircle = true;
    setTimeout(() => {
      packet.isOpen = true;
    }, 2000);
  }
};

const handleCarouselChange = (current) => {
  // 切换时关闭所有红包
  packets.value.forEach((p) => {
    // p.isOpen = false;
    p.isCircle = false;
  });
};
// 关闭对话框时通知父组件更新状态
const handleClose = () => {
  emit("update:modelValue", false);
};
</script>

<style lang="scss" scoped>
.red {
  background-color: transparent;
}
// .flip_img {
//   transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
//   transform-style: preserve-3d;
//   backface-visibility: hidden;
//   transform-origin: center;
//   &.flipped {
//     transform: rotateY(180deg) scale(1.2);
//     opacity: 0;
//   }
// }

.flip_img {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  transform-style: preserve-3d;
  backface-visibility: visible; /* 确保旋转时背面可见 */
  transform-origin: center;
}

.flip_img.flipped {
  animation: spin 1.2s linear infinite; /* 无限循环旋转 */
  opacity: 1; /* 保持不透明 */
  transform: scale(1.2); /* 保持缩放 */
}

@keyframes spin {
  from {
    transform: rotateY(0deg) scale(1.2); /* 起始状态 */
  }
  to {
    transform: rotateY(360deg) scale(1.2); /* 结束状态（完成一圈） */
  }
}

:deep(.el-dialog) {
  background-color: transparent;
  --el-dialog-bg-color: transparent;
}
:deep(.el-carousel__mask) {
  background-color: transparent;
}
.red-packet-container {
  width: 1220px;
  z-index: 9999;
  padding: 0;
}
.packet_logo {
  img {
    width: 68px;
    height: 68px;
  }
}
.packet_from {
  font-weight: 400;
  font-size: 10px;
  color: #ffffff;
  line-height: 10px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 7px;
}
.packet_label {
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  line-height: 21px;
  text-align: left;
  font-style: normal;
  margin-top: 15px;
  text-transform: none;
}
.red-packet {
  width: 300px;
  height: 400px;
  margin: 0 auto;
  background: #e4393c;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background: url("@/assets/live/redPacket03.png");
  background-size: 100% 100%;
}
.el-carousel__mask {
  background-color: rgba(255, 255, 255, 0);
}
/* 封面动画 */
.cover-enter-active,
.cover-leave-active {
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.cover-enter-from,
.cover-leave-to {
  transform: translateY(-100%);
  opacity: 0;
}

/* 内容动画 */
.content-enter-active {
  transition: all 0.6s 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.content-enter-from {
  transform: translateY(100%);
  opacity: 0;
}

.qiang-group {
  position: absolute;
  top: 270px;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

// .decor-line {
//   position: absolute;
//   width: 80%;
//   height: 2px;
//   background: #fed136;
//   left: 10%;
//   top: 50%;
//   transform: translateY(-50%);
// }

.content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  box-sizing: border-box;
  background: url("@/assets/live/redPacket3.png");
  background-size: 100% 100%;
  .result {
    width: 100%;
    text-align: center;
    div {
      margin-top: 40px;
      span {
        font-weight: 500;
        font-size: 46px !important;
        color: #ff9d40;
        line-height: 30px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }
    .result_span {
      font-weight: 500;
      font-size: 16px;
      color: #ff9d40;
      line-height: 21px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
}

.from {
  font-size: 1.2em;
  margin-bottom: 30px;
}

.greeting {
  font-size: 2em;
  font-weight: bold;
  color: #fed136;
}

@keyframes textAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 调整ElementPlus轮播样式 */
:deep(.el-carousel__item) {
  background: transparent;
}

:deep(.el-carousel__arrow) {
  background: rgba(228, 57, 60, 0.8);
}

:deep(.el-carousel__arrow:hover) {
  background: #e4393c;
}
</style>
